<template>
<div>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" class="login-form" :rules="rules">
      <div class="login-title">登录</div>
      <div class="login-subtitle">社区团购平台</div>
      
      <el-form-item v-if="loginType==1" class="form-item" prop="username">
        <input class="input" v-model="loginForm.username" placeholder="请输入账户">
      </el-form-item>
      
      <el-form-item v-if="loginType==1" class="form-item" prop="password">
        <input class="input" v-model="loginForm.password" placeholder="请输入密码" type="password">
      </el-form-item>
      
      <el-form-item v-if="roles.length>1" class="radio-group" prop="role">
        <el-radio v-model="loginForm.tableName" :label="item.tableName" v-for="(item, index) in roles" :key="index" @change.native="getCurrentRow(item)">{{item.roleName}}</el-radio>
      </el-form-item>
      
      <el-form-item class="btn-group">
        <el-button v-if="loginType==1" class="login-btn" @click="submitForm('loginForm')">登录</el-button>
        <el-button v-if="loginType==1" class="reset-btn" @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
      
      <div class="register-links">
        <router-link v-for="(item, index) in registerRoles" :key="index" class="register-link" :to="{path: '/register', query: {role: item.tableName,pageFlag:'register'}}">
          注册{{item.roleName.replace('注册','')}}
        </router-link>
      </div>
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: this.$config.baseUrl,
      loginType: 1,
      roleMenus: [{"backMenu":[{"child":[{"appFrontIcon":"cuIcon-brand","buttons":["新增","查看","修改","删除","报表"],"menu":"用户","menuJump":"列表","tableName":"yonghu"}],"menu":"用户管理"},{"child":[{"appFrontIcon":"cuIcon-phone","buttons":["新增","查看","修改","删除"],"menu":"商家","menuJump":"列表","tableName":"shangjia"}],"menu":"商家管理"},{"child":[{"appFrontIcon":"cuIcon-vipcard","buttons":["新增","查看","修改","删除"],"menu":"社区信息","menuJump":"列表","tableName":"shequxinxi"}],"menu":"社区信息管理"},{"child":[{"appFrontIcon":"cuIcon-paint","buttons":["查看","删除","查看评论"],"menu":"商品信息","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息管理"},{"child":[{"appFrontIcon":"cuIcon-attentionfavor","buttons":["新增","查看","修改","删除"],"menu":"商品分类","menuJump":"列表","tableName":"shangpinfenlei"}],"menu":"商品分类管理"},{"child":[{"appFrontIcon":"cuIcon-addressbook","buttons":["查看","修改","回复","删除"],"menu":"留言板管理","tableName":"messages"}],"menu":"留言板管理"},{"child":[{"appFrontIcon":"cuIcon-discover","buttons":["查看","修改","删除"],"menu":"轮播图管理","tableName":"config"},{"appFrontIcon":"cuIcon-news","buttons":["新增","查看","修改","删除"],"menu":"活动公告","tableName":"news"}],"menu":"系统管理"},{"child":[{"appFrontIcon":"cuIcon-explore","buttons":["查看","修改","删除","导出"],"menu":"已取消订单","tableName":"orders/已取消"},{"appFrontIcon":"cuIcon-medal","buttons":["查看","修改","删除","导出"],"menu":"已退款订单","tableName":"orders/已退款"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","修改","删除","导出"],"menu":"未支付订单","tableName":"orders/未支付"},{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","修改","导出"],"menu":"已发货订单","tableName":"orders/已发货"},{"appFrontIcon":"cuIcon-explore","buttons":["修改","删除","查看","导出"],"menu":"已支付订单","tableName":"orders/已支付"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","修改","删除","导出","日销量","月销量","品销量","日销额","月销额","品销额"],"menu":"已完成订单","tableName":"orders/已完成"}],"menu":"订单管理"}],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-qrcode","buttons":["查看"],"menu":"商品信息列表","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息模块"}],"hasBackLogin":"是","hasBackRegister":"否","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"管理员","tableName":"users"},{"backMenu":[],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-qrcode","buttons":["查看"],"menu":"商品信息列表","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息模块"}],"hasBackLogin":"否","hasBackRegister":"否","hasFrontLogin":"是","hasFrontRegister":"是","roleName":"用户","tableName":"yonghu"},{"backMenu":[{"child":[{"appFrontIcon":"cuIcon-paint","buttons":["新增","查看","修改","删除","查看评论"],"menu":"商品信息","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息管理"},{"child":[{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","发货","物流","导出"],"menu":"已支付订单","tableName":"orders/已支付"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","删除","日销量","月销量","品销量","月销额","日销额","品销额","导出"],"menu":"已完成订单","tableName":"orders/已完成"},{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","导出"],"menu":"已取消订单","tableName":"orders/已取消"},{"appFrontIcon":"cuIcon-medal","buttons":["查看","删除","导出"],"menu":"已退款订单","tableName":"orders/已退款"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","删除","导出"],"menu":"未支付订单","tableName":"orders/未支付"},{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","物流","导出"],"menu":"已发货订单","tableName":"orders/已发货"}],"menu":"订单管理"}],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-qrcode","buttons":["查看"],"menu":"商品信息列表","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息模块"}],"hasBackLogin":"是","hasBackRegister":"是","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"商家","tableName":"shangjia"}],
      loginForm: {
        username: '',
        password: '',
        tableName: '',
        code: '',
      },
      role: '',
      roles: [],
      rules: {
        username: [
          { required: true, message: '请输入账户', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      codes: [{
        num: 1,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 2,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 3,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 4,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }]
    }
  },
  computed: {
    registerRoles() {
      return this.roles.filter(item => item.hasFrontRegister === '是')
    }
  },
  components: {
  },
  created() {
    for(let item in this.roleMenus) {
      if(this.roleMenus[item].hasFrontLogin=='是') {
        this.roles.push(this.roleMenus[item]);
      }
    }
  },
  mounted() {
  },
  methods: {
    randomString() {
      var len = 4;
      var chars = [
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
        'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
        'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
        'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2',
        '3', '4', '5', '6', '7', '8', '9'
      ]
      var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
      var sizes = ['14', '15', '16', '17', '18']

      var output = []
      for (var i = 0; i < len; i++) {
        // 随机验证码
        var key = Math.floor(Math.random() * chars.length)
        this.codes[i].num = chars[key]
        // 随机验证码颜色
        var code = '#'
        for (var j = 0; j < 6; j++) {
          var key = Math.floor(Math.random() * colors.length)
          code += colors[key]
        }
        this.codes[i].color = code
        // 随机验证码方向
        var rotate = Math.floor(Math.random() * 45)
        var plus = Math.floor(Math.random() * 2)
        if (plus == 1) rotate = '-' + rotate
        this.codes[i].rotate = 'rotate(' + rotate + 'deg)'
        // 随机验证码字体大小
        var size = Math.floor(Math.random() * sizes.length)
        this.codes[i].size = sizes[size] + 'px'
      }
    },
    getCurrentRow(row) {
      this.role = row.roleName;
    },
    submitForm(formName) {
      if (this.roles.length!=1) {
        if (!this.role) {
          this.$message.error("请选择登录用户类型");
          return false;
        }
      } else {
        this.role = this.roles[0].roleName;
        this.loginForm.tableName = this.roles[0].tableName;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.get(`${this.loginForm.tableName}/login`, {params: this.loginForm}).then(res => {
            if (res.data.code === 0) {
              localStorage.setItem('Token', res.data.token);
              localStorage.setItem('UserTableName', this.loginForm.tableName);
              localStorage.setItem('username', this.loginForm.username);
              localStorage.setItem('adminName', this.loginForm.username);
              localStorage.setItem('sessionTable', this.loginForm.tableName);
              localStorage.setItem('role', this.role);
              localStorage.setItem('keyPath', this.$config.indexNav.length+2);
              this.$router.push('/index/center');
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 1500,
              });
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(35deg, #c37c4f 0%, #8ed0ec 100%);
}

.login-form {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.login-title {
  font-size: 28px;
  color: #08b344;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.login-subtitle {
  font-size: 20px;
  color: #08b344;
  text-align: center;
  margin-bottom: 30px;
}

.form-item {
  margin-bottom: 20px;
  
  .input {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border: none;
    border-bottom: 2px solid #08b344;
    background: transparent;
    font-size: 14px;
    transition: all 0.3s;
    
    &:focus {
      outline: none;
      border-bottom-color: #0ca140;
    }
  }
}

.radio-group {
  margin: 20px 0;
  
  /deep/ .el-radio {
    margin-right: 20px;
    color: #666;
    
    .el-radio__input.is-checked + .el-radio__label {
      color: #08b344;
    }
    
    .el-radio__input.is-checked .el-radio__inner {
      background: #08b344;
      border-color: #08b344;
    }
  }
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.login-btn {
  width: 45%;
  background: linear-gradient(45deg, #08b344, #0ca140);
  border: none;
  color: white;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  
  &:hover {
    opacity: 0.9;
  }
}

.reset-btn {
  width: 45%;
  background: white;
  border: 1px solid #ddd;
  color: #666;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  
  &:hover {
    border-color: #08b344;
    color: #08b344;
  }
}

.register-links {
  margin-top: 20px;
  text-align: center;
  
  .register-link {
    color: #08b344;
    text-decoration: none;
    margin: 0 10px;
    font-size: 14px;
    
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
